<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/mui/css/mui.css">
  <!-- 导入初始化样式的css -->
  <link rel="stylesheet" href="./css/normalize.css">
  <!-- 引入自己的css  -->
  <link rel="stylesheet" href="./css/index-one.css">
</head>

<body>
  <!-- 头部区域 -->
  <header>
    <h1 id="text"></h1>
    <a href="./login.html" class="mui-icon mui-icon-redo" id= "itt"></a>
  </header>
  <!-- top图片 -->
  <img id="top_img" src="./images/muwu.jpg" alt="">
  <!-- 轮播区域 -->
  <div class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
        </nav>
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
        </nav>
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>医疗健康</p>
          </a>
        </nav>
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>景点</p>
          </a>
        </nav>
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>婚纱摄影</p>
          </a>
        </nav>
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate">
        <nav>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
          <a href="#"><img src="./images/logo.png" alt="">
            <p>生活服务</p>
          </a>
        </nav>
      </div>
    </div>
  </div>
  <!-- 主体内容区域 -->
  <div id="content_main">
    <p class="title">猜你喜欢</p>
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header mui-card-media item_box">
        
      </div>
    </div>
  </div>

<!-- 模板引擎 -->
<script type="text/html " id="tpl_food">
  <ul id="goodsid" class="mui-table-view">
      {{each }}
      <li class="mui-table-view-cell mui-media">
          <a href="./details.html">
              <img class="mui-media-object mui-pull-left" src="{{'https:'+$value.img}}">
              <div class="mui-media-body" id="cap">
                  {{$value.shop_name}}
                  <p class='mui-ellipsis'>{{$value.shop_name_sub}}</p>
              </div>
             <div id="price">
              <span class="price1">¥{{$value.price_current}}</span>
              <span class="price2">已售{{$value.sale_desc}}</span>
             </div>
          </a>
      </li>
      {{/each}}
   
  </ul>     

</script>

  <!-- 引入相应的js文件 -->
  <script src="./lib/mui/js/mui.js"></script>
  <!-- 导入flexible -->
  <script src="./lib/flexible/index.js"></script>
  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/template/template-web.js"></script>
  <!-- 自己的js -->
  <script src="./js/index-one.js"></script>
</body>

</html>